<template>
    <view class="main">
        <view class="data">
            <view class="item">
                <text>联系人</text>
                <input type="text" :value="name" @input="bindKeyName" placeholder="请填写姓名" />
            </view>
            <view class="item">
                <text>手机号</text>
                <input @blur="checkedFun" type="number" :value="mobile" @input="bindKeyMobile" placeholder="11位手机号码" />
            </view>
            <view class="item">
                <text>地区</text>
                <region-picker @change="bindRegionChange" :value="region" :custom-item="customItem">
                    <view class="picker">{{ region[0] }} {{ region[1] }} {{ region[2] }}</view>
                </region-picker>
                <view class="icon">
                    <image src="/static/images/my_order.png"></image>
                </view>
            </view>
            <view class="item">
                <text>详细地址</text>
                <input type="text" @input="bindKeyDetailed" :value="detailed" placeholder="街道门牌号信息" />
            </view>
        </view>
        <view class="btn active" @tap="submitFun">保存</view>
        <view v-if="checked == 1" class="btn active" @tap="delsubmit">删除</view>
    </view>
</template>

<script>
// pages/addressAdd/addressAdd.js
const app = getApp();
let addressDetailed = '';
let check = false;
export default {
    data() {
        return {
            region: ['重庆市', '重庆市', '合川区'],
            area: '',
            name: '',
            mobile: '',
            detailed: '',
            addressIs: true,
            id: null,
            checked: null,
            customItem: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (options.checked == 1) {
            this.setData({
                checked: options.checked,
                name: options.name,
                mobile: options.mobile,
                region: options.city.split(','),
                detailed: options.detailed,
                id: options.id
            });
        } // console.log(this.data.region)
		const userid=uni.getStorageSync("userid")	
    },
    methods: {
        delsubmit: function (e) {
			let userid=uni.getStorageSync("userid");
            var that = this;
					uni.request({
						url:"/api/user/address/deleteAddress",
						method:"POST",
						data:{
							user_id:userid,
							id:that.id
						},
                    success(res) {
                        uni.showToast({
                            title: '删除地址成功。',
                            icon: 'success',
                            duration: 2000
                        });
                        uni.redirectTo({
                            url: '/pages/addressList/addressList'
                        }); // console.log("删除地址成功",res)
                    },

                    fail(res) {
                        console.log('删除地址失败', res);
                    }
                });
        },

        bindRegionChange: function (e) {
            console.log('picker发送选择改变，携带值为', e.detail.value);
            console.log(e.detail.value);
            this.setData({
                region: e.detail.value,
                area: e.detail.value.join('')
            });
        },

        bindKeyName: function (e) {
            this.setData({
                name: e.detail.value
            });
        },

        bindKeyMobile: function (e) {
            this.setData({
                mobile: e.detail.value
            });
        },

        checkedFun: function (e) {
            // console.log(e.detail.value)
            var that = this;
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;

            if (!myreg.test(e.detail.value)) {
                check = false;
            } else {
                check = true;
            }
        },

        bindKeyDetailed: function (e) {
            this.setData({
                detailed: e.detail.value
            });
        },

        submitFun: function () {
		let userid=	uni.getStorageSync("userid")
            var that = this;	
            // addressDetailed = that.area + that.detailed;
            // console.log(addressDetailed);

            if (check) {
                if (that.area != '') {
				uni.request({
					url:"/api/user/address/addAddress ",
					method:"POST",
					data:{
						user_id:userid,
						real_name:that.name,
						phone_number:that.mobile,
						province:that.region[0],
						city:that.region[1],
						district:that.region[2],
						full_address:that.detailed		
					},
					success: (res) => {
					                // console.log("添加成功",res)
					                uni.showToast({
					                    title: '添加地址成功。',
					                    icon: 'success',
					                    duration: 2000
					                });
					                uni.redirectTo({
					                    url: '/pages/addressList/addressList?'
					                });
					            },
					
					            fail(res) {
					                // console.log("添加失败",res)
					                uni.showToast({
					                    title: '添加地址失败，请重新填写信息。',
					                    icon: 'none',
					                    duration: 2000
					                });
					            }
					        });
					    } else {
					        uni.showToast({
					            title: '地区未选择。',
					            icon: 'none',
					            duration: 2000
					        });
					    }
					} else {
					    uni.showToast({
					        title: '手机号有误，请重新填写！',
					        icon: 'none',
					        duration: 2000
					    });
					}
				}
				
        }
    
};
</script>
<style>
.main {
    height: 100vh;
    background: #e8e9e8;
}
.item {
    display: flex;
    border-bottom: 1px solid #d8d8d8;
    line-height: 40px;
    padding: 15px 0 0 0;
}
.data {
    background: #fff;
    padding: 0 20px;
}
.item text {
    flex: 0 1 25%;
    font-size: 14px;
    color: #333333;
}

.item input {
    flex: 1 1 auto;
    font-size: 16px;
    color: #333333;
    line-height: 40px;
    height: 40px;
}

.item .code {
    flex: 0 1 25%;
    font-size: 12px;
    color: #ef9b9b;
    border-left: 1px solid #d8d8d8;
    text-align: center;
    height: 24px;
    margin: 8px 0;
    line-height: 24px;
}

.item .icon {
    flex: 0 1 10%;
    text-align: right;
}

.item picker {
    flex: 1 1 auto;
    font-size: 20px;
}

.item .icon image {
    width: 8px;
    height: 15px;
}

.text {
    font-size: 12px;
    color: #999999;
    background: #fff;
    padding: 10px 20px;
}

.btn {
    line-height: 46px;
    background: #e5e5e5;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    margin: 50px 30px;
    border-radius: 2px;
}
.active {
    background: #ef9b9b;
}
</style>
